<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card flip</title>
    <link rel="stylesheet" href="../assets/css/card-flip.css">
</head>

<body>
    <h1>
       3d Flip cards
    </h1>
    <br>
    <div class="util__buttons text-center">
        <button id="change-theme-btn" class="theme-btn">Change Theme</button>
    </div>
    <br>
    <h1></h1>
    <div class="scene">
        <div class="items items-1">
            <div class="item font">left</div>
            <div class="item back">Flip</div>
        </div>
    </div>
    <div class="scene">
        <div class="items items-2">
            <div class="item font">right</div>
            <div class="item back">Flip</div>
        </div>
    </div>
    <br>
    <h1></h1>
    <div class="scene">
        <div class="items items-3">
            <div class="item font">Center-right</div>
            <div class="item back">Flip</div>
        </div>
    </div>
    <div class="scene">
        <div class="items items-4">
            <div class="item font">down-up</div>
            <div class="item back">
                <div class="text-rotate">Flip</div>
            </div>
        </div>
    </div>
    <br>
    <h1></h1>
    <div class="scene">
        <div class="items items-5">
            <div class="item font">up-down</div>
            <div class="item back">
                <div class="text-rotate">Flip</div>
            </div>
        </div>
    </div>
    <div class="scene">
        <div class="items items-6">
            <div class="item font">diagonally</div>
            <div class="item back">
                <div class="text-rotate">Flip</div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('change-theme-btn')
            .addEventListener('click', function () {
                let darkThemeEnabled = document.body.classList.toggle('dark-theme');
                localStorage.setItem('dark-theme-enabled', darkThemeEnabled);

            });

        if (JSON.parse(localStorage.getItem('dark-theme-enabled'))) {
            document.body.classList.add('dark-theme');

        }
    </script>

</body>

</html>